<template>
	<div style="position: relative;height:100%;" :style="{ width: imgsize+'px', }" @click.stop="openImg()">
		<img class="imgshadow-img" style="object-fit:cover;" :src="url || require('./nopic.png')"
			:style="{ width: imgsize+'px', height: height + 'px','border-radius':radius+'px'  }">
		<div class="imgshadow-shadow imgshadow-hoverI"
			:style="{ width: imgsize+'px', height: height + 'px' ,'line-height':height + 'px','border-radius':radius+'px' }">
			<i class="iconfont icon-fangda" style></i>
		</div>
		<!-- 图片放大预览 -->
		<imgViewer :imgkey="imgkey" :imglist="imgViewerList" ref="myimgViewer"></imgViewer>
	</div>
</template>
<script>
	// import imgViewer from './imgViewer'
	// 大图预览
	export default {
		name: "imgshadow",
		props: {
			// 图片地址
			url: {
				default: require('./nopic.png'),
			},
			// 图片宽
			imgsize: {
				default: 60,
			},
			// 图片高
			height: {
				default: 60,
			},
			// 图片列表
			imgList: {
				default: null
			},
			// 图片键值
			imgkey: {
				default: null
			},
			// 禁止点击
			disableclick: {
				default: false
			},
			// 图片圆角
			radius: {
				default: 10,
			},
			//显示第几个
			num: {
				default: 0
			}
		},
		components: {
			// imgViewer: imgViewer
		},
		computed: {
			imgViewerList() {
				return this.imgList || [];
			}
		},
		data() {
			return {};
		},
		methods: {
			openImg() {
				if (!this.disableclick) {
					this.$refs.myimgViewer.showImg(this.num);
				}
			},
			showImg() {
				let that = this;
				this.$refs.myimgViewer.showImg();
			}
		},
		created() {}
	};
</script>
<style scoped>
	.imgshadow-img {
		border-radius: 10px;
	}

	.imgshadow-shadow {
		position: absolute;
		background: rgba(0, 0, 0, 0.5);
		text-align: center;
		border-radius: 10px;
		opacity: 0;
		top: 0px;
		left: 0px;
	}

	.imgshadow-hoverI {
		cursor: pointer;
	}

	.imgshadow-hoverI:hover {
		opacity: 1;
	}
</style>